<template>
	<view class="container">
		<scroll-view style="width: 100%;height: 100%;" scroll-y="true">
			<view class="list">
				<uni-list-chat :badgeText="item.noread" @click="goMessage(index)" clickable :note="item.messages[item.messages.length-1].message" :time="formatTimestamp(Number(item.messages[item.messages.length-1].send_time))" :title="item.name" v-for="(item,index) in messagelist" :key="index" avatarCircle :avatar="item.avatur"></uni-list-chat>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import {onShow,onLoad} from "@dcloudio/uni-app"
	import http from "@/utils/request.js"
	let messagelist=ref([])
	onLoad((e)=>{
		getApp().globalData.socket.getMessage((e)=>{
			let send_id=JSON.parse(e.data).sendid.substring(1)
			let flag=false
			messagelist.value.forEach((item,index)=>{
				if(item.send_id===send_id){
					messagelist.value[index].noread++
					messagelist.value[index].messages.push({message:JSON.parse(e.data).message,send_time:JSON.parse(e.data).sendtime})
					flag=true
				}
			})
			if(!flag){
				let response=http.get('/message/getusermessage',{
					receive_id:uni.getStorageSync('peopleinfo').people_id
				})
				response.then(res=>{
					if(res.data.code===200){
						messagelist.value=[...messagelist.value,...res.data.data]
					}
				})
			}
		})
	})
	onShow(()=>{
		let response=http.get('/message/getpeoplemessage',{
			receive_id:uni.getStorageSync('userinfo').user_id
		})
		response.then(res=>{
			if(res.data.code===200){
				messagelist.value=res.data.data
			}
		})
	})

	function goMessage(index){
		let obj={
			name:messagelist.value[index].name,
			avatur:messagelist.value[index].avatur,
			people_id:messagelist.value[index].send_id
		}
		let response1=http.post('/message/changeread',{
			send_id:messagelist.value[index].send_id,
			receive_id:uni.getStorageSync('userinfo').user_id,
			is_user_send:0
		})
		response1.then(res=>{
			if(res.data.code===200){
				console.log(getApp().globalData.noreadnum)
				getApp().globalData.noreadnum-=Number(messagelist.value[index].noread)
				console.log(getApp().globalData.noreadnum)
				if(getApp().globalData.noreadnum>0)uni.setTabBarBadge({
					index:1,
					text:String(getApp().globalData.noreadnum)
				})
				else{
					uni.removeTabBarBadge({
						index:1
					})
				}
				uni.navigateTo({
					url:"/pages/chat/message?peopleinfo="+JSON.stringify(obj)
				})
			}
		})
	}
	
	if(!uni.getStorageSync('userinfo')){
		uni.navigateTo({
			url: "/pages/login/index"
		})
	}
	function formatTimestamp(timestamp) {
	    // 创建一个新的Date对象
	    const date = new Date(timestamp);
	 
	    // 提取年、月、日、小时、分钟和秒
	    const year = date.getFullYear();
	    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且用0填充
	    const day = String(date.getDate()).padStart(2, '0'); // 用0填充
	    const hours = String(date.getHours()).padStart(2, '0'); // 用0填充
	    const minutes = String(date.getMinutes()).padStart(2, '0'); // 用0填充
	    const seconds = String(date.getSeconds()).padStart(2, '0'); // 用0填充
	 
	    // 格式化日期字符串
	    const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	 
	    return formattedDate;
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		
		.list{
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			
			&-item{
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				
				.xinxi{
					width: calc(100% - 110rpx);
					display: flex;
					flex-direction: column;
					
					.title{
						display: flex;
						width: 100%;
						align-items: center;
						margin-bottom: 15rpx;
						justify-content: space-between;
						
						.name{
							width: 70%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 30rpx;
							font-weight: 500;
						}
						
						.time{
							font-size: 24rpx;
							color: #BDC0C5;
						}
					}
					
					.message{
						width: 100%;
						font-size:26rpx;
						color: #95989C;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				
				&:active{
					background-color: #efefef;
				}
			}
		}
	}
</style>
